<template>
  <div id="spractice">
    <!-- 专科版本添加详情盒子 -->
    <div style="width:1200px; margin:0 auto; position:relative">
      <div class="detailBox blocks">
        <div class="chapterList-top">
          <p class="fl">章节列表</p>
          <div class="fr">
            <i class="iconfont icon-Group-" @click="deleteFns"></i>
          </div>
        </div>
        <el-collapse accordion v-model="activeName" @change="handleChange">
          <div v-for="(item,index) in appList" :key="index">
            <el-collapse-item v-if="item.levels == 3" :name="index">
              <template slot="title">
                 <div :class="item.locked? 'collapsTitle2' : 'collapsTitle' " >
                  <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                  <i class="iconfont icon-baoguofahuo" v-else></i>
                  <span class="collapsTitle_span">单元{{index+1}}&nbsp;{{item.name}}</span>
                  <i class="iconfont icon-lock"  v-if="item.locked"></i>
                </div>
              </template>
              <div v-for="(items,indexs) in item.children" :key="indexs">
                <div class="courseName">
                  {{indexs+1}}&nbsp;{{items.name}}&nbsp;
                  <i
                    class="iconfont icon-diannao-copy"
                    v-if="items.type == 2 || items.type == 3"
                    style="vertical-align:baseline"
                  ></i>
                  <i class="iconfont icon-tubiaozhizuomoban1" v-if="items.type == 4"></i>
                </div>
                <div v-if="items.otherInfo.length <=0 ">
                  <span style="padding-left:28px; color:rgb(66, 66, 66)">暂无数据</span>
                </div>
                <div
                  v-else
                  class="detailbox"
                  v-for="(item3,index3) in items.otherInfo"
                  :key="index3"
                  @click="EnteDetails(item3)"
                >
                  <div
                    class="infoName"
                    :class="item3.type == 4 && item3.id == chapterId? 'studying':''"
                  >
                    <i class="iconfont icon-42" v-if="!item3.show " style="color:#424242"></i>
                    <span
                      class="crile"
                      :class="item3.type == 4 && item3.id == chapterId? 'crileBg':''"
                      v-else
                    ></span>
                    <span class="Tiltlefiles" v-if="item3.show">{{item3.name}}</span>
                    <i
                      class="iconfont icon-diannao-copy"
                      v-if="item3.experimentCourseFlag && item3.name != '实验学习'"
                    ></i>
                    <span
                      class="Tiltlefiles"
                      v-if="!item3.show "
                      style="color:#424242"
                    >{{item3.name}}</span>
                  </div>
                  <div class="fr studying" v-if="item3.type == 4 && item3.id == chapterId">
                    正在学
                    <i class="iconfont icon-shijian00"></i>
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item v-if="item.levels == 2" :name="index">
              <template slot="title">
                <div class="collapsTitle">
                  <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                  <i class="iconfont icon-baoguofahuo" v-else></i>
                  <span class="collapsTitle_span">章节{{index+1}}&nbsp;{{item.name}}&nbsp;</span>
                  <i
                    class="iconfont icon-diannao-copy"
                    v-if="item.type == 2 || item.type == 3"
                    style="vertical-align:baseline"
                  ></i>
                  <i class="iconfont icon-tubiaozhizuomoban1" v-if="item.type == 4"></i>
                </div>
              </template>
              <div v-if="item.otherInfo.length > 0">
                <div
                  class="detailbox"
                  v-for="(item2,index4) in item.otherInfo"
                  :key="index4"
                  @click="EnteDetails(item2)"
                >
                  <div
                    class="infoName"
                    :class="item2.type == 4 && item2.id == chapterId? 'studying':''"
                  >
                    <i class="iconfont icon-42" v-if="!item2.show " style="color:#424242"></i>
                    <span
                      class="crile"
                      :class="item2.type == 4 && item2.id == chapterId? 'crileBg':''"
                      v-else
                    ></span>
                    <span class="Tiltlefiles" v-if="item2.show">{{item2.name}}</span>
                    <i
                      class="iconfont icon-diannao-copy"
                      v-if="item2.experimentCourseFlag && item2.name != '实验学习'"
                    ></i>
                    <span
                      class="Tiltlefiles"
                      v-if="!item2.show "
                      style="color:#424242"
                    >{{item2.name}}</span>
                  </div>
                  <div class="fr studying" v-if="item2.type == 4 && item2.id == chapterId">
                    正在学
                    <i class="iconfont icon-shijian00"></i>
                  </div>
                </div>
              </div>
              <div v-else style="padding-left:25px;">暂无数据</div>
            </el-collapse-item>
          </div>
        </el-collapse>
      </div>
    </div>
    <!-- 专科版本弹窗 -->
    <!-- <el-dialog
      :close-on-click-modal="false"
      class="dialog-virtual dialogList"
      title="提示"
      :visible.sync="dialogVirtual"
      width="460px"
    >
      <div class="dialog-content">
        <i class="iconfont icon-tishi"></i>
        <p>有其它实验正在进行中，是否停止它进入该实验?</p>
      </div>
      <span slot="footer" class="dialog-footer btnlist">
        <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
        <el-button class="button-style" @click="VirtualSave">确 定</el-button>
      </span>
    </el-dialog> -->
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content" style="position:relative">
          <div v-if="courseTitleData">
            <span style="display:inline-block; overflow:hidden;" class="preview-title">随堂练习</span>
            &nbsp;
            <span style="display:inline-block; overflow:hidden;" class="mr0">{{ courseTitleData.courseName }}</span>
            <span style="display:inline-block; overflow:hidden;" class="preview-line">/</span>
            <span :title="courseTitleData.chapterName" class="beyond-hiding" style="display:inline-block;width:550px;">{{ courseTitleData.chapterName }}</span>
            <!-- 专科版本-->
            <span class="chapterlists" @click="detalList" v-if=" _btn_flag == undefined" style="display:none;">
              <i class="iconfont icon-liebiao1"></i> &nbsp;章节列表
            </span>
          </div>
          <!-- yx修改 页面跳转传递参数5.0功能-->
          <div v-else>
            <span class="preview-title">随堂练习</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="mr0">{{ skillName }}</span>
            <span class="preview-line">/</span>
            <span>{{ courseName }}</span>
            <!-- 专科版本-->
            <span class="chapterlists" @click="detalList" v-if=" _btn_flag == undefined">
              <i class="iconfont icon-liebiao1"></i> &nbsp;章节列表
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="jx-content exam-top">
      <div class="exam-top-content" v-if="resQuestionData">
        <!-- 标题，如果是选择题显示多选题或单选题 -->
        <div class="exam-title">
          <span>{{ resQuestionData.typeName }}</span>
          <span v-if="resQuestionData.type === 1">
            <span v-if="resQuestionData.isMultipleChoice">[多选题]</span>
            <span v-if="!resQuestionData.isMultipleChoice">[单选题]</span>
          </span>
        </div>
      </div>
    </div>
    <div class="exam-content" v-if="resQuestionData">
      <div class="jian-box">
        <div class="jian-content">
          <div
            @click="prevQuestion"
            class="an-question prev-question"
            :class="{'disabled-question':resQuestionData.orderNumber === 1}"
            v-if="!flags"
          ></div>
          <div
            @click="nextQuestion"
            class="an-question next-question"
            :class="{'disabled-question':resQuestionData.orderNumber === resQuestionData.questionCount}"
            v-if="!flags"
          ></div>
          <div
            class="an-question prev-question"
            :class="{'disabled-question':resQuestionData.orderNumber === 1 || flags}"
            v-if="flags"
          ></div>
          <div
            class="an-question next-question"
            :class="{'disabled-question':resQuestionData.orderNumber === resQuestionData.questionCount || flags}"
            v-if="flags"
          ></div>
        </div>
      </div>
      <div class="answer-title">
        <span>{{ resQuestionData.orderNumber }}、</span>
        <span v-html="resQuestionData.content"></span>
        <!-- <span class="c-blue">{{ resQuestionData.score }}分</span> -->
        <!-- 题/共多少题 -->
        <span
          class="question-num c-blue"
        >{{ resQuestionData.orderNumber }}/{{ resQuestionData.questionCount }}</span>
      </div>
      <!-- answer:[] -->
      <!-- 选择题 -->
      <!-- 答案给序号 [0,1] -->
      <div v-if="resQuestionData.type === 1">
        <!-- 多选题 -->
        <div v-if="resQuestionData.isMultipleChoice">
          <el-checkbox-group v-model="checkList" @change="isChangeFn()">
            <el-checkbox
              v-for="(item,index) in resQuestionData.choiceList"
              :key="index"
              :label="index"
              class="jx-content"
            >
              <div class="exam-item-xuan">{{ chose[index] }}</div>
              <div class="exam-item-chose" v-html="item"></div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 单选题 -->
        <div v-if="!resQuestionData.isMultipleChoice">
          <el-radio-group v-model="radio" @change="isChangeFn()">
            <el-radio
              v-for="(item,index) in resQuestionData.choiceList"
              :key="index"
              :label="index"
              class="jx-content"
            >
              <template slot-scope="scope">
                <div class="exam-item-xuan">{{ chose[index] }}</div>
                <div class="exam-item-chose" v-html="item"></div>
              </template>
            </el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 判断题 -->
      <!-- answer:true -->
      <div v-if="resQuestionData.type === 2">
        <div class="jx-content">
          <el-radio-group v-model="radio2" @change="isChangeFn()">
            <el-radio :label="true">正确</el-radio>
            <el-radio :label="false">错误</el-radio>
          </el-radio-group>
        </div>
      </div>
      <!-- 填空 -->
      <div class="jx-content fill-content" v-if="resQuestionData.type === 3 && fillList.length">
        <div>请填写答案：</div>
        <span v-show="false">{{ fillStr }}</span>
        <div v-for="(item,index) in fillList" :key="index">
          <span class="row-index">{{ index+1 }}.</span>
          <el-input @change="isChangeFn()" v-model="fillList[index]"></el-input>
        </div>
      </div>
      <!-- 简答 -->
      <!-- answer:'xxxxx' -->
      <div v-if="resQuestionData.type === 4">
        <div class="jx-content">
          <div>请填写答案：</div>
          <br />
          <mavonEditor ref="answer"></mavonEditor>
        </div>
      </div>
      <!-- 附件 -->
      <div v-if="resQuestionData.type === 7">
        <div class="jx-content">
          <div class="upfile">
            <div v-if="fileName !== ''" class="upload-success">
              <img src="../../../assets/images/upload-success.png" alt="" />
            </div>
            <div class="button-style" style="overflow:hidden; position:relative;">
              <input id="abcd" class="inputfile" type="file" @change="uploadFile" />
              上传文件
            </div>
            <div class="upfile-2">提示：ZIP格式文件上传，大小不超过50MB</div>
            <div>{{ fileName }}</div>
          </div>
        </div>
      </div>

      <!-- <div class="btn-group question-change">
            <el-button :disabled="resQuestionData.orderNumber === 1" @click="prevQuestion" class="button-style">上一题</el-button>
            <el-button :disabled="resQuestionData.orderNumber === resQuestionData.questionCount" @click="nextQuestion" class="button-style">下一题</el-button>
      </div>-->
    </div>
  </div>
</template>
<script>
import mavonEditor from "../../../components/mavonEditor";
import axios from "axios";
import $ from "jquery";
export default {
  components: { mavonEditor },
  data() {
    return {
      //为了上传之后保存临时存取的当前row
      uploadRow:[],
      fileList:[],
      // fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      //黑框名称
      courseTitleData: "",
      chapterId: this.$route.query.chapterId,
      courseId: this.$route.query.courseId,
      //章节名称
      courseName: this.$route.query.chapterName,
      //课程名称
      skillName: this.$route.query.skillName,
      tabActiveName: "2",
      //单选
      radio: "",
      //多选
      checkList: [],
      chose: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      //填空题数组
      fillList: [],
      //判断题
      radio2: "",
      //附件题名字
      fileName:"",
      //当前题
      resQuestionData: "",
      timer: null,
      timeLeft: null,
      //下一个题的id
      nextId: "",
      //答案
      answer: "empty",
      //yx5.0
      typesStatus: this.$route.query.typesStatus,
      //专科版本数据
      appList: [],
      roles: "",
      //是否添加过班级
      userStatus: "",
      courseId: "",
      activeName: "",
      dialogVirtual: false,
      //是否从技术库来的
      _btn_flag: "",
      //存储点击的那个章节id
      clickId: "",
      //列表
      openFlag: "",

      //班级Id
      classId: "",

      flags: false,
      //是否更改了答案
      isChange: false
    };
  },
  computed: {
    //填空题字符串
    fillStr() {
      let that = this;
      if (that.fillList.length) {
        //把学生添加的英文逗号","改为中文逗号"，"
        $.each(that.fillList, function(i, d) {
          that.fillList[i] = d.replace(/,/g, "，"); //把,替换成，
        });
        let result = that.fillList.join(",");
        //console.log(result, 222);
        return result;
      }
    }
  },
  //专科版本
  created() {
    //班级Id
    this.classId = this.$route.query.classId;
    // 从状态管理获取roles
    this.roles = this.$store.state.user.roles[0];
    this._btn_flag = this.$route.query._btn_flag;
    // 课程ID
    this.courseId = this.$route.query.courseId;
    this.DetailData();
    this.ClassInit();
    //yx 添加分辨率判断
    this.$nextTick(() => {
      if (window.screen.height <= 900) {
        //console.log(window.screen.height,147)
        $(".blocks").css("max-height", "520px");
        $(".detailBox").css("max-height", "520px");
      }
    });
  },
  mounted() {
    this.init();
    //this.viewUpLoad();
  },
  methods: {
    viewUpLoad() {
      let self = this;
      self.$http
      ///course/{courseId}/chapter/{chapterId}/practice/view
        .get("/tes/course/" + self.courseId + "/chapter/" + self.chapterId + "/practice/view")
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            console.log(res,123123);
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    uploadFile($event){
      let self = this
      let fileType = $event.target.files[0].name
          fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
      if(fileType.toLowerCase() != 'zip'){
          self.$message.error('请上传zip格式的文件!')
          return
      }
      if($event.target.files[0].size > 52428487){
          self.$message.error('大小不能超过50MB!')
          return
      }
      let fd = new FormData()
          fd.append('file', $event.target.files[0]);
      console.log(fd,123);
      const loading = this.$loading({
          lock: true,
          text: '正在上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
      })
      //'/tes/course/'+ courseId + '/chapter/'+ chapterId +'/practice/upload'
      axios.post('/tes/course/'+ self.courseId + '/chapter/'+ self.chapterId +'/practice/upload?id=' + self.resQuestionData.id,fd, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
          let res = response.data
          if(res.code == '200'){
              loading.close()
              self.$message({
                  message: '上传成功',
                  type: 'success'
              })
              self.fileName = $event.target.files[0].name;
              $event.target.value = null;
              //刷洗您当前题
              //self.refreshQuestion();
          }else{
              loading.close()
              self.$message.error(res.message)
          }
      })
    },
    uploadSuccess(res) {
      let that = this;
      if (res.code === 200) {
        that.$message.success("文件上传成功");
        that.getQuestionList();
      } else {
        that.$message.error(res.message);
      }
    },
    //失败
    uploadError() {
      this.$message.error(res.message);
    },
    //上传中
    uploadProgress() {
      this.$message("文件上传中...");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    //选择判断填空是否修改
    isChangeFn() {
      let that = this;
      that.isChange = true;
      console.log(that.isChange, 0);
    },
    //专科版本
    handleChange(val) {
      //val 索引
      this.openFlag = val;
      let vals = String(val);
      this.openFlag = vals;
    },
    //初始化详情列表
    DetailData() {
      let self = this;
      self.$http
        .get("/tes/course/" + self.courseId + "/chapter/list")
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.appList = res.data;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //点击关闭
    deleteFns() {
      $(".detailBox").hide();
    },
    //点击详情
    detalList() {
      let self = this;
      let IndexValue;
      for (let i = 0; i < self.appList.length; i++) {
        if (self.appList[i].chapterIds.includes(Number(self.chapterId))) {
          IndexValue = i;
        }
      }
      // let IndexValue;
      // for(let i =0; i< this.appList.length; i++){
      // 	if(this.appList[i].recentlyStudiedFlag == 1){
      // 		IndexValue = i
      // 		console.log(IndexValue,7878)
      // 	}
      // }
      this.activeName = IndexValue;
      //最近学习索引等于打开这项
      this.openFlag = IndexValue;
      this.scrollFn(790);
      //判断屏幕分辨率
      if (window.screen.height <= 900) {
        this.scrollFn(540);
      }
      $(".detailBox")
        .stop()
        .slideToggle();
    },
    //自动到最近学习
    scrollFn(n) {
      // this.$nextTick(()=>{
      //     $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top},20)
      // })
      this.$nextTick(() => {
        let topValue = $(".studying")
          .parent()
          .offset().top;
        if (topValue > n) {
          $(".detailBox").animate(
            {
              scrollTop:
                $(".studying")
                  .parent()
                  .offset().top - 100
            },
            20
          );
        }
      });
    },
    // 是否添加过班级
    ClassInit() {
      let self = this;
      self.$http
        .get("/tes/course/" + self.courseId + "/user-status")
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.userStatus = res.data;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //跳转详情
    EnteDetails(item) {
      let self = this;
      //console.log(item,999)
      //如果为真，可以跳转
      if (item.show) {
        if (item.name == "理论学习" || item.name == "任务引导") {
          self.$router.push({
            path: "/Teaching/MyCourses/CoursewareDetail",
            query: {
              courseId: self.courseId,
              chapterId: item.id,
              classId: self.classId,
            }
          });
        } else if (item.name == "教学资源") {
          self.$router.push({
            path: "/Teaching/MyCourses/CourseResourceDetail",
            query: {
              courseId: self.courseId,
              chapterId: item.id,
              classId: self.classId
            }
          });
        } else if (item.name == "备课材料") {
          self.$router.push({
            path: "/Teaching/MyCourses/CourseMaterialDetail",
            query: {
              courseId: self.courseId,
              chapterId: item.id,
              classId: self.classId
            }
          });
        } else if (item.name == "实验学习" || item.experimentCourseFlag) {
          if (self.userStatus == "NOT_CREATE_CLASS") {
            self.$router.push({
              path: "/Teaching/MyCourses/VirtualMachineManual",
              query: {
                courseId: self.courseId,
                chapterId: item.id,
                isCourseDetail: true,
                classId: self.classId
              }
            });
          } else if (self.userStatus == "EXIST_CLASS") {
            self.clickId = item.id;
            self.$http
              .get(
                "/tes/image-allocation/course/" + self.courseId + "/" + item.id
              )
              .then(response => {
                let res = response.data;
                if (res.code == "200") {
                  if (res.data.allocated) {
                    self.$http
                      .get("/tes/experiment/course/" + item.id + "/prompt")
                      .then(response => {
                        let res = response.data;
                        if (res.code == "200") {
                          if (res.data) {
                            // 弹窗是否强制跳转
                            self.dialogVirtual = true;
                          } else {
                            if (
                              self.roles == "TEACHER" ||
                              self.roles == "MARKET_TEACHER" ||
                              self.roles == "UNIVERSITY_TEACHER"
                            ) {
                              // 跳转实验页
                              self.$router.push({
                                path: "/Teaching/MyCourses/VirtualMachine",
                                query: {
                                  courseId: self.courseId,
                                  chapterId: item.id,
                                  classId: self.classId
                                }
                              });
                            } else if (self.roles == "STUDENT") {
                              // 跳转实验页
                              self.$router.push({
                                path: "/Teaching/MyCourses/STVirtualMachine",
                                query: {
                                  courseId: self.courseId,
                                  chapterId: item.id,
                                  classId: self.classId
                                }
                              });
                            }
                          }
                        } else {
                          self.$message.error(res.message);
                        }
                      })
                      .catch(err => {
                        console.log(err);
                      });
                  } else {
                    self.$router.push({
                      path: "/Teaching/MyCourses/VirtualMachineManual",
                      query: {
                        courseId: self.courseId,
                        chapterId: item.id,
                        isCourseDetail: true,
                        classId: self.classId
                      }
                    });
                  }
                } else {
                  self.$message.error(res.message);
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        } else if (item.name == "随堂练习") {
          //分为学生和老师身份
          if (self.roles == "STUDENT") {
            if (self.userStatus == "NOT_CREATE_CLASS") {
              self.typesStatus = 1; //没有班级时传1  不显示提交按钮
            } else {
              self.typesStatus = 2; //有班级时传2 显示提交按钮
            }
            self.$router.push({
              path: "SPractice",
              query: {
                courseId: self.courseId,
                chapterId: item.id,
                typesStatus: self.typesStatus,
                classId: self.classId
              }
            });
            window.location.reload();
          } else if (
            self.roles == "TEACHER" ||
            self.roles == "MARKET_TEACHER" ||
            self.roles == "UNIVERSITY_TEACHER"
          ) {
            self.$router.push({
              path: "TPractice",
              query: {
                courseId: self.courseId,
                chapterId: item.id,
                classId: self.classId
              }
            });
          }
        }
      }
    },
    // 确定跳转实验详情
    // VirtualSave() {
    //   let self = this;
    //   if (
    //     self.roles == "TEACHER" ||
    //     self.roles == "MARKET_TEACHER" ||
    //     self.roles == "UNIVERSITY_TEACHER"
    //   ) {
    //     // 跳转实验页
    //     self.$router.push({
    //       path: "/Teaching/MyCourses/VirtualMachine",
    //       query: {
    //         courseId: self.courseId,
    //         chapterId: self.clickId,
    //         classId: self.classId
    //       }
    //     });
    //   } else if (self.roles == "STUDENT") {
    //     self.$router.push({
    //       path: "/Teaching/MyCourses/STVirtualMachine",
    //       query: {
    //         courseId: self.courseId,
    //         chapterId: self.clickId,
    //         classId: self.classId
    //       }
    //     });
    //   }
    //   self.dialogVirtual = false;
    // },
    /*
            需求：
                角色：学生
                目的：随堂练习答题
                题型：选择，判断，填空，简答
                逻辑：答题后答题卡对应题答案改变，点击上一题下一题上传答题卡，答题回填，答题卡显示是否已答题，提交后刷新页面进入查看答题情况页面，无法再进入此页
            方法及属性
                1.reSubmitExam() 进入页面前判断是否提交，已提交跳转至SPracticeWatch页面查看答题情况
                2.获取当前题目和答题卡内容 getQuestionAndAnswerSheetListInit()
                2.1.回填已答过内容 fillQuestion()
                2.2.答题卡默认选中第一个题型 tabActiveName
            */
    init() {
      this.getCourseTitleData();
      this.getWrongQuestions();
      //进入页面前判断是否提交
      //this.reSubmitExam();
      //关闭页面或浏览器时触发 退出随堂练习
      //window.addEventListener( 'beforeunload', e => this.exitExam() );
      //获取当前题目和答题卡内容
      //this.getQuestionAndAnswerSheetListInit();
    },
    //获取重答疑集
    getWrongQuestions(id){
      let that = this;
      let ids = that.$route.query.ids;
      if(typeof ids == "string"){
        ids = [ids];
        console.log(ids);
      }
      if(!id){
        id = ids[0];
      }
      console.log(typeof ids);
      axios
        ///course/{courseId}/chapter/{chapterId}/practice/wrongPractice
        .post("/tes/course/" + that.courseId + "/chapter/" + that.chapterId + "/practice/wrongPractice?questionId=" + id,ids)
        .then(function(res) {
          console.log("成功1");
          console.log(res,556666);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.data.data, 666);
              let resQuestionData = res.data.data;
              //查看几个空
              let fillNums = resQuestionData.content.split("(+)").length - 1;

              that.fillList = [];
              for (let i = 0; i < fillNums; i++) {
                that.fillList[i] = "";
              }
              console.log(that.fillList, 88888);

              //填空题替换(+)为（）
              resQuestionData.content = resQuestionData.content.replace(
                /\(\+\)/g,
                "（）"
              );
              //简答默认给空答案 answer:''
              let jdt = resQuestionData.answerSheetList.filter(
                item => item.type == 4
              );
              //如果有简答题
              if (jdt.length) {
                let jdtList = jdt[0].answerSheetList;
                //console.log(jdtList,555);
                jdtList.forEach(item => {
                  if (item.answer === undefined) {
                    item.answer = "";
                  }
                  console.log(item, 66);
                });
              }
              that.resQuestionData = resQuestionData;
              console.log(that.resQuestionData, 321);
              //清空
              //初始化
              //单选
              that.radio = "";
              //多选
              that.checkList = [];
              //判断题
              that.radio2 = "";
              //填空
              // that.fillList = [];
              //附件
              // that.fileName = "";
              //简答，不清空
              if (that.$refs.answer) {
                //that.$refs.answer.changeVal("");
                // that.$nextTick(function() {
                //     that.$refs.answer.changeVal("");
                // });
              }
              //回填
              that.fillQuestion(that.resQuestionData);
              //tabActiveName默认选中第一个题型
              that.tabActiveName = String(that.resQuestionData.type);
              console.log(that.tabActiveName, 12222);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //公共接口，考试名称
    getCourseTitleData() {
      let that = this;
      let paperId = that.$route.query.paperId - 0;
      axios
        .get("/tes/course/" + that.courseId + "/chapter/" + that.chapterId)
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.data.data, 666);
              that.courseTitleData = res.data.data;
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //验证是否交卷 已交卷页面跳转到考试列表页面
    reSubmitExam() {
      let that = this;
      let paperId = that.$route.query.paperId - 0;
      axios
        .get(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/status"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //true为已提交 进入SPracticeWatch页面查看提交结果 false为没提交
              let data = res.data.data;
              console.log(that.classId, 1123);
              if (data) {
                return;
                //进入查看页面
                that.$router.push({
                  path: "/SPracticeWatch",
                  query: {
                    courseId: that.courseId,
                    chapterId: that.chapterId,
                    myClassId:that.$route.query.myClassId,
                    evaluatStatus:that.$route.query.evaluatStatus
                  }
                });
              }
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //首次获取当前题目和答题卡内容
    getQuestionAndAnswerSheetListInit() {
      let that = this;
      axios
        ///course/{courseId}/chapter/{chapterId}/practice/
        .get(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice"
        )
        .then(function(res) {
          if (res.status === 200) {
            if (res.data.code === 200) {
              let resQuestionData = res.data.data;
              //查看几个空
              let fillNums = resQuestionData.content.split("(+)").length - 1;

              that.fillList = [];
              for (let i = 0; i < fillNums; i++) {
                that.fillList[i] = "";
              }
              console.log(that.fillList, 88888);

              //填空题替换(+)为（）
              resQuestionData.content = resQuestionData.content.replace(
                /\(\+\)/g,
                "（）"
              );
              //简答默认给空答案 answer:''
              let jdt = resQuestionData.answerSheetList.filter(
                item => item.type == 4
              );
              //如果有简答题
              if (jdt.length) {
                let jdtList = jdt[0].answerSheetList;
                //console.log(jdtList,555);
                jdtList.forEach(item => {
                  if (item.answer === undefined) {
                    item.answer = "";
                  }
                  console.log(item, 66);
                });
              }
              that.resQuestionData = resQuestionData;
              console.log(that.resQuestionData, 321);
              //回填
              that.fillQuestion(that.resQuestionData);
              //tabActiveName默认选中第一个题型
              that.tabActiveName = String(that.resQuestionData.type);
              console.log(that.tabActiveName, 12222);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //答题卡判断是否答题
    isActive(item2, index2) {
      //选择
      //多选 checkList:[]
      //单选 radio:'' answer:0
      //填空 ''
      //判断 radio2:''
      //简答 ''
      //综上 不是空字符串 不是undefined 不是'empty' 是数组并且不是空数组
      //是数组

      //填空题
      let isNull = false;
      if (item2.type === 3 && item2.answer) {
        let fillList = item2.answer.split(",");
        isNull = fillList.some(item => item);
      }
      //多选题
      if (item2.answer instanceof Array) {
        return item2.answer.length;
      } else {
        //不是数组
        //            填写 / 没填写
        //填空 isNull true / false
        //单选 answer:0,1,2,3,4,5 / ''
        //判断 answer:true / false
        //简答 answer:'123' / ''

        //选择
        if (item2.type === 1) {
          if (item2.answer === 0) {
            return true;
          } else {
            return item2.answer;
          }
        }
        //判断
        if (item2.type === 2) {
          if (item2.answer === false || item2.answer === true) {
            return true;
          } else {
            return false;
          }
        }
        //填空
        if (item2.type === 3) {
          return isNull;
        }
        //简答
        if (item2.type === 4) {
          if (item2.answer) {
            return true;
          }
        }
        //附件
        if(item2.type === 7){
          if(item2.answer){
            return true;
          }
        }
      }
    },

    //发送答案 reqAnswer传答题卡答案 无返回 成功后执行getQuestionAndAnswerSheetList 重新获取列表
    reqAnswer(row, rowNow) {
      console.log(row,rowNow);
      //row为选中题数据
      let that = this;
      //let paperId = that.$route.query.paperId;
      let answerSheetId = that.resQuestionData.answerSheetId;
      let type = that.resQuestionData.type;
      that.flags = true;
      //当前答题往答题卡赋值答案
      if (that.isChange) {
        if (type === 1) {
          let isMultipleChoice = that.resQuestionData.isMultipleChoice;
          if (isMultipleChoice) {
            //多选 checkLis
            rowNow.answer = that.checkList;
          } else {
            //单选 radio
            console.log(that.radio, 222333);
            rowNow.answer = that.radio;
          }
        }
        //判断 radio2 不为空才传答案
        if (type === 2) {
          rowNow.answer = that.radio2;
        }
        //填空
        if (type === 3) {
          rowNow.answer = that.fillStr;
        }
      }
      that.isChange = false;
      //选择

      //填空 简答
      if (type === 4) {
        rowNow.answer = that.$refs.answer.value;
      }
      //附件题
      if(type === 7){
        rowNow.answer = that.fileName;
      }
      console.log(that.resQuestionData.answerSheetList, 66666);
      console.log(rowNow, "row");

      //初始化
      //单选
      that.radio = "";
      //多选
      that.checkList = [];
      //判断题
      that.radio2 = "";
      //填空
      that.fillList = [];
      //附件
      that.fileName = "";
      //简答，不清空
      if (that.$refs.answer) {
        //that.$refs.answer.changeVal("");
        // that.$nextTick(function() {
        //     that.$refs.answer.changeVal("");
        // });
      }
      //答案
      //that.answer = "empty";

      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/1",
          that.resQuestionData.answerSheetList
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //选题 反答题卡和当前题
              that.getQuestionAndAnswerSheetList(row.id);
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //上一题 下一题 选题 获取当前题和答题卡列表
    getQuestionAndAnswerSheetList(rowId) {
      console.log(rowId,123);
      let that = this;
      axios
        .get(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice",
          {
            params: { questionId: rowId }
          }
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              setTimeout(() => {
                that.flags = false;
              }, 0);
              console.log(9990);
              let resQuestionData = res.data.data;
              //查看几个空
              let fillNums = resQuestionData.content.split("(+)").length - 1;

              that.fillList = [];
              for (let i = 0; i < fillNums; i++) {
                that.fillList[i] = "";
              }
              console.log(that.fillList, 88888);

              //填空题替换(+)为（）
              resQuestionData.content = resQuestionData.content.replace(
                /\(\+\)/g,
                "（）"
              );
              that.resQuestionData = resQuestionData;
              //回填
              that.fillQuestion(that.resQuestionData);
              //tabActiveName默认选中当前题型

              that.tabActiveName = String(that.resQuestionData.type);
              console.log(that.tabActiveName, 34444);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },

    //退出随堂练习
    exitExam() {
      let that = this;
      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/exit"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message.success("退出成功");
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },

    //上一题 获取答题卡当前题和上一题的row和当前题的rowNow  传答题卡reqAnswer
    prevQuestion() {
      let that = this;
      //that.flags = true
      if (that.resQuestionData.orderNumber === 1) {
        return;
      }
      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));

      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex - 1];
      let rowNow = newAnswerSheetList[nowIndex];
      that.getWrongQuestions(row.id);
      //传答案 传答题卡 反答题卡
      //this.reqAnswer(row, rowNow);
    },
    //下一题 获取答题卡当前题和下一题的row和当前题的rowNow  传答题卡reqAnswer
    nextQuestion() {
      let that = this;
      console.log(2341);
      //that.flags = true
      if (
        that.resQuestionData.orderNumber === that.resQuestionData.questionCount
      ) {
        return;
      }
      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));

      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex + 1];
      let rowNow = newAnswerSheetList[nowIndex];
      that.getWrongQuestions(row.id);
      
      //传答案 传答题卡 反答题卡
      //this.reqAnswer(row, rowNow);
    },
    //当前题刷新一下，附件题专用
    refreshQuestion() {
      let that = this;
      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));

      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex];
      let rowNow = newAnswerSheetList[nowIndex];
      //传答案 传答题卡 反答题卡
      this.reqAnswer(row, rowNow);
    },
    //点击答题卡选题 获取答题卡点击题的row和当前题的rowNow 传答题卡reqAnswer
    clickQuestion(row) {
      let that = this;
      //在答题卡中获取当前题对象
      let type = that.resQuestionData.type;
      //在答题卡中查找当前题的数据rowNow
      let rowNow = that.resQuestionData.answerSheetList
        .find(item => item.type === type)
        .answerSheetList.find(item2 => item2.id === that.resQuestionData.id);

      //传答案 传答题卡
      this.reqAnswer(row, rowNow);
    },

    //回填答案
    fillQuestion(resQuestionData) {
      console.log("回填");
      let that = this;
      let id = resQuestionData.id;
      let type = resQuestionData.type;
      console.log(resQuestionData, 1234);
      //回填，有值才回填
      if (
        resQuestionData.answer !== undefined &&
        resQuestionData.answer !== "empty"
      ) {
        //选择
        if (type === 1) {
          //多选
          if (resQuestionData.isMultipleChoice) {
            that.checkList = resQuestionData.answer;
          } else {
            //单选
            that.radio = resQuestionData.answer;
          }
        }
        //判断
        if (type === 2) {
          that.radio2 = resQuestionData.answer;
        }
        //填空
        if (type === 3) {
          let fillAnswers = resQuestionData.answer.split(",");
          $.each(that.fillList, function(i, d) {
            that.fillList[i] = fillAnswers[i];
          });
        }
        //简答
        if (type === 4) {
          console.log(resQuestionData.answer, 23445);
          that.$nextTick(function() {
            that.$refs.answer.changeVal(resQuestionData.answer);
          });
        }
        //附件
        if(type === 7){
          that.fileName = resQuestionData.answer;
          console.log(resQuestionData,55555);
        }
      }
    },

    //交卷传当前题答案
    submitReqAnswer() {
      //row为选中题数据
      let that = this;
      //在答题卡中获取当前题对象
      let type = that.resQuestionData.type;
      //在答题卡中查找当前题的数据rowNow
      let rowNow = that.resQuestionData.answerSheetList
        .find(item => item.type === type)
        .answerSheetList.find(item2 => item2.id === that.resQuestionData.id);
      //let paperId = that.$route.query.paperId;
      let answerSheetId = that.resQuestionData.answerSheetId;

      //当前答题往答题卡赋值答案
      //选择
      if (type === 1) {
        let isMultipleChoice = that.resQuestionData.isMultipleChoice;
        if (isMultipleChoice) {
          //多选 checkLis
          rowNow.answer = that.checkList;
        } else {
          //单选 radio
          rowNow.answer = that.radio;
        }
      }
      //判断 radio2 不为空才传答案
      if (type === 2) {
        rowNow.answer = that.radio2;
      }
      //填空
      if (type === 3) {
        rowNow.answer = that.fillStr;
      }
      //填空 简答
      if (type === 4) {
        rowNow.answer = that.$refs.answer.value;
      }
      console.log(that.resQuestionData.answerSheetList, 66666);
      console.log(rowNow, "row");
      //附件题
      if(type === 7){
        rowNow.answer = that.fileName;
      }
      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/1",
          that.resQuestionData.answerSheetList
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log("交卷传答案成功");
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //交卷 传答题卡答案 页面跳转回考试列表页面
    submitExam() {
      //row为选中题数据
      let that = this;
      that
        .$confirm("是否提交?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          let answerSheetId = that.resQuestionData.answerSheetId;
          that.submitReqAnswer();
          console.log(that.resQuestionData.answerSheetList,65432);
          axios
            .post(
              "/tes/course/" +
                that.courseId +
                "/chapter/" +
                that.chapterId +
                "/practice/2",
              that.resQuestionData.answerSheetList
            )
            .then(function(res) {
              console.log("成功1");
              console.log(res);
              if (res.status === 200) {
                if (res.data.code === 200) {
                  that.$message.success("提交成功");
                  //进入查看页面
                  that.$router.push({
                    path: "/SPracticeWatch",
                    query: {
                      courseId: that.courseId,
                      chapterId: that.chapterId
                    }
                  });
                } else {
                  that.$message.error(res.data.message);
                }
              }
            })
            .catch(function(err) {
              if (err.response) {
                console.log(err.response);
              }
            });
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped>
.upfile{
  text-align: center;
  padding:100px 0;
}
.upfile-2{
  color:#adadad;
  margin:20px 0;
}
.jian-content >>> .questionss {
  background: url("../../../assets/images/jian.png") no-repeat 0 0;
  width: 27px;
  height: 49px;
  position: absolute;
  top: 0;
  cursor: pointer;
}

.blocks::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.blocks::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 50px;
}
.blocks {
  overflow-y: scroll;
  max-height: 760px;
}
.el-collapse {
  border: none;
}
.dialog-virtual >>> .el-dialog__footer {
  text-align: center;
}
.el-collapse-item >>> .el-collapse-item__header {
  background: #2d3136;
  color: #fff;
  border-bottom: none;
  text-align: center;
}
.el-collapse-item >>> .el-icon-arrow-right {
  display: none;
}
.el-collapse-item >>> .el-collapse-item__content {
  background: #26292c;
  color: #a2a3a4;
  padding: 5px 20px;
}
.el-collapse-item__content > div {
  padding: 4px 0;
}
.el-collapse-item >>> .el-collapse-item__wrap {
  border-bottom: none;
}
</style>
<style lang="scss">
//专科版本添加
#spractice {
  .upload-success{
    margin-bottom:20px;
  }
  .inputfile{
    background: red;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .chapterlists {
    position: absolute;
    right: 0px;
    cursor: pointer;
    color: #bbb;
    &:hover {
      color: #fff;
    }
  }
  //详情盒子
  .detailBox {
    width: 400px;
    position: absolute;
    top: 65px;
    bottom: initial;
    right: 38px;
    background: #26292c;
    max-height: 760px;
    border-radius: 6px;
    display: none;
    z-index: 999;
    .chapterList-top {
      overflow: hidden;
      height: 50px;
      line-height: 50px;
      padding: 0 18px;
      & > p {
        line-height: 50px;
        color: #a2a3a4;
      }
      i {
        color: #a2a3a4;
        &:hover {
          color: #fff;
          cursor: pointer;
        }
      }
    }
    .infoName {
      display: inline-block;

      &:hover {
        span {
          color: #1374e4;
        }
        .crile {
          background: #1374e4;
        }
      }
    }
    .icon-diannao-copy {
      font-size: 14px;
      margin-left: 8px;
      color: #1374e4;
      vertical-align: super;
    }
    .courseName {
      margin: 5px 0;
      cursor: pointer;
      &:hover {
        color: #fff;
      }
      .icon-tubiaozhizuomoban1 {
        color: #1374e4;
        font-size: 16px;
      }
    }
  }
  .collapsTitle {
    text-align: left;
    // margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 22px;
    color: #a2a3a4;
    .collapsTitle_span {
      max-width: 270px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 13px;
    }
    .icon-chaibaoguoqujian {
      color: #a2a3a4;
      font-size: 14px;
    }
    &:hover {
      color: #fff;
      .icon-chaibaoguoqujian {
        color: #fff;
      }
    }
    .icon-tubiaozhizuomoban1 {
      color: #1374e4;
      font-size: 16px;
    }
  }
  .icon-shijian00 {
    color: #1374e4;
    margin-left: 5px;
  }

  .crile {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #a2a3a4;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 9px;
  }
  .studying {
    color: #1374e4;
  }
  .crileBg {
    background: #1374e4;
  }
  .detailbox {
    padding: 2px 0 2px 15px;
    cursor: pointer;
    &:hover {
      color: #1374e4;
      .crile {
        background: #1374e4;
      }
    }
  }
  .Tiltlefiles {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 210px;
    cursor: pointer;
  }

  .intnet {
    color: #1277eb;
    font-size: 14px;
    display: inline-block;
    vertical-align: 12px;
  }
  .taskName {
    margin-right: 5px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
  }
  .icon-42 {
    font-size: 12px;
    vertical-align: text-bottom;
    margin-left: -2px;
    margin-right: 5px;
  }
  .dialogList {
    .dialog-content {
      text-align: center;
      i {
        font-size: 50px;
        color: #d6d6d6;
        display: block;
        margin-top: 25px;
      }
      p {
        font-size: 14px;
        text-align: center;
        line-height: 18px;
      }
      .handbook-item {
        text-align: center;
        margin-top: 30px;
      }
    }
    .btnlist {
      .button-style {
        width: 90px;
      }
    }
  }
}
</style>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#spractice {
  img {
    max-width: 100%;
  }
  .jian-box {
    position: fixed;
    width: 1000px;
    height: 49px;
    top: 350px;
    .jian-content {
      position: relative;
      .an-question {
        width: 27px;
        height: 49px;
        position: absolute;
        top: 0;
        background: url("../../../assets/images/jian.png") no-repeat 0 0;
        cursor: pointer;
        &:hover {
          background: url("../../../assets/images/jian-hover.png") no-repeat 0 0;
        }
      }
      .disabled-question {
        cursor: no-drop;
        &:hover {
          background: url("../../../assets/images/jian.png") no-repeat 0 0;
        }
      }
      .prev-question {
        left: -80px;
      }
      .next-question {
        right: -80px;
        transform: rotate(180deg);
      }
    }
  }
  .jx-content {
    width: 1000px;
  }
  .fullscreen {
    top: 162px;
  }
  //修改按钮默认样式
  .el-button:focus {
    background-color: #fff;
    color: $btn-blue;
    border-color: $btn-blue;
  }
  .el-button:hover {
    background-color: $btn-blue;
    color: #fff;
    border-color: $btn-blue;
  }
  .mr0 {
    margin-right: 0 !important;
  }
  .preview-top {
    position: relative;
    height: 120px;
    margin: 0px auto 0;
    z-index: 2;
    .preview-top1 {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #101937;
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        span {
          margin-right: 40px;
        }
        .preview-title {
          font-size: 18px;
          margin-right: 0;
        }
        .preview-line {
          margin: 0 6px;
        }
      }
    }
    .preview-top2 {
      margin-top: 0;
      width: 100%;
      line-height: 80px;
      position: fixed;
      top: 80px;
      padding: 0;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
        .button-style {
          margin-left: 20px;
        }
        .preview-score {
          width: 80px;
          input {
            width: 80px;
          }
        }
      }
      .preview-top-content2 {
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        padding-bottom: 30px;
      }
    }
  }
  .fill-content {
    > div {
      padding: 10px;
    }
    .row-index {
      margin-right: 20px;
    }
    .el-input {
      width: 80%;
      input {
        width: 100%;
      }
    }
  }
  p {
    line-height: inherit;
    display: inline;
  }
  label.el-checkbox.jx-content,
  label.el-radio.jx-content {
    margin-left: 0;
    display: flex;
    white-space: normal;
    .el-checkbox__input,
    .el-radio__input {
      padding-top: 8px;
    }
    .el-checkbox__label {
      display: flex;
      font-size: 0;

      .exam-item-xuan {
        padding: 6px;
        font-size: 16px;
      }
    }
    .el-radio__label {
      display: flex;
      font-size: 0;
      .exam-item-xuan {
        padding: 0 6px;
        font-size: 16px;
      }
    }
    .exam-item-chose {
      line-height: 30px;
      font-size: 16px;
    }
  }
  .exam-top {
    width: 100%;
    padding: 0;
    position: fixed;
    top: 60px;
    z-index: 2;
    margin-top: 0;
    .exam-top-content {
      width: $width;
      margin: 0 auto;
      padding: 0 40px;
      line-height: 80px;
      display: flex;
      justify-content: space-between;
      .exam-title {
        border-bottom: 2px solid $blue;
        color: $blue;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
      }
      .exam-rightbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div {
          margin-left: 10px;
        }
        .question-tab {
        }
      }
    }
  }
  .exam-content {
    width: 1000px;
    margin: 20px auto 0;
    position: relative;
    z-index: 1;
    .answer-title {
      position: relative;
      line-height: 32px;
      font-size: 16px;
      padding: 30px 40px;
      font-weight: bold;
      .c-blue {
        margin: 0 0 0 10px;
        font-weight: normal;
      }
      .question-num {
        position: absolute;
        min-width: 60px;
        left: 1000px;
        top: 30px;
      }
    }
    .question-item {
      margin-left: 42px;
      display: flex;
      .question-chose {
        &:after {
          content: "：";
        }
      }
      .question-item {
        flex: 1;
      }
    }
  }
  //悬浮框内容
  // .el-popper {
  //   width: 440px;
  //   box-sizing: border-box;
  //   padding: 0 16px 20px;
  //   position: relative;
  //   .el-badge__content {
  //     top: 14px;
  //   }
  //   .el-tabs__nav {
  //     padding: 0 20px;
  //   }
  //   .el-tabs__active-bar {
  //     left: 10px;
  //     padding: 0 10px;
  //     width: 42px;
  //     background-color: $blue;
  //   }
  //   .el-tabs__item {
  //     height: 46px;
  //     line-height: 46px;
  //   }
  //   .el-tabs__item:hover,
  //   .el-tabs__item.is-active {
  //     color: $blue;
  //   }
  //   .question-tab-item {
  //     padding: 20px 0 0 40px;
  //     li {
  //       cursor: pointer;
  //       position: relative;
  //       width: 22px;
  //       height: 23px;
  //       line-height: 23px;
  //       margin: 0 20px 20px 0;
  //       text-align: center;
  //       float: left;
  //       border: 1px solid #8e8e8e;
  //       color: #8e8e8e;
  //     }
  //     li.active {
  //       border-color: $blue;
  //       color: $blue;
  //       &:after {
  //         position: absolute;
  //         content: "\e614";
  //         bottom: -7px;
  //         font-family: "iconfont";
  //         color: #3fdb9b;
  //         background: #fff;
  //         line-height: 14px;
  //       }
  //     }
  //   }
  // }
}
.question-change {
  text-align: center;
  margin: 50px 0 0 0;
  .button-style {
    width: 280px;
    height: 49px;
    line-height: 49px;
    border-radius: 49px;
    font-size: 16px;
    margin: 0 10px;
  }
}
//悬浮框内容
.tab-popper.el-popper {
  width: 440px;
  box-sizing: border-box;
  padding: 0 16px 20px;
  position: relative;
  .el-badge__content {
    top: 14px;
  }
  .el-tabs__nav {
    padding: 0 20px;
  }
  .el-tabs__active-bar {
    left: 10px;
    padding: 0 10px;
    width: 42px !important;
    background-color: $blue;
  }
  .el-tabs__item {
    height: 46px;
    line-height: 46px;
  }
  //   .el-tabs__item:hover,
  //   .el-tabs__item.is-active {
  //     color: $blue;
  //   }
  .el-tabs__active-bar.is-top {
    display: none;
  }
  .el-tabs__item:hover,
  .el-tabs__item.is-active {
    color: $blue;
    &:after {
      content: "";
      display: block;
      height: 2px;
      width: 100%;
      background: $blue;
      position: absolute;
      transform: translate(-10px, -4px);
    }
  }

  .question-tab-item {
    padding: 20px 0 0 40px;
    li {
      cursor: pointer;
      position: relative;
      width: 22px;
      height: 23px;
      line-height: 23px;
      margin: 0 20px 20px 0;
      text-align: center;
      float: left;
      border: 1px solid #8e8e8e;
      color: #8e8e8e;
    }
    li.active {
      border-color: $blue;
      color: $blue;
      &:after {
        position: absolute;
        content: "\e614";
        bottom: -7px;
        font-family: "iconfont";
        color: #3fdb9b;
        background: #fff;
        line-height: 14px;
      }
    }
  }
}
</style>
